<template>
	<view class="equipment" hover-class="hover-default" @click.stop="emit('check')">
		<image class="cover-image" :src="equipmentDetail.img" mode="aspectFit" lazy-load />
		<view class="cont flex flex-col flex-grow justify-evenly">
			<view class="flex-row" v-if="showNo">
				<view class="serial-number">{{ equipmentDetail.host_serial_no }}</view>
			</view>
			<view class="device-status">
				设备状态：
				<text :class="equipmentDetail.is_abnormal == 1 ? 'error' : 'normal'">{{ ['正常', '异常'][equipmentDetail.is_abnormal] }}</text>
			</view>
			<view class="use-status">
				<slot>使用状态：{{ ['空闲', '使用中'][equipmentDetail.use_state] }}</slot>
			</view>
			<view class="use-status" v-if="showNo">
				<slot>距您：{{equipmentDetail.distance.toFixed(2)}} KM</slot>
			</view>
			<view class="address flex justify-between">
				<slot name="bottom">
					<view class="text">{{ equipmentDetail.region }}{{ equipmentDetail.address }}</view>
					<image class="nav-icon" src="/static/nav.png" @click.stop="tapNavMap" />
				</slot>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { postNav } from '@/api';

const props = defineProps({
	equipmentDetail: {
		type: Object,
		default: () => ({})
	},
	showNo: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(['check']);

const coverImages = computed(() => props.equipmentDetail.img?.split('|') || ['']);

function tapNavMap() {
	postNav({
		latitude: +props.equipmentDetail.latitude,
		longitude: +props.equipmentDetail.longitude,
		region: props.equipmentDetail.region,
		address: props.equipmentDetail.address,
		host_serial_no: props.equipmentDetail.host_serial_no
	});
	uni.openLocation({
		address: props.equipmentDetail.region + props.equipmentDetail.address,
		latitude: +props.equipmentDetail.latitude,
		longitude: +props.equipmentDetail.longitude
	});
}
</script>

<style scoped lang="scss">
.equipment {
	margin: 30rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	background-color: rgba(255, 255, 255, 0.5);
	display: flex;
	column-gap: 20rpx;
	overflow: hidden;
	.cover-image {
		width: 220rpx;
		height: 160rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
	}
	.cont {
		overflow: hidden;
	}
	.serial-number {
		@include ellipsis();
		flex: 1 0 0%;
		margin-right: 20rpx;
	}
	.device-status {
		font-size: 26rpx;
		color: #333;
		.normal {
			color: #0cb900;
		}
		.error {
			color: #feae09;
		}
	}
	.use-status {
		color: #333;
		font-size: 26rpx;
	}
	.address {
		color: #999;
		font-size: 26rpx;
		align-items: center;
		column-gap: 20rpx;
		.text {
			@include ellipsis(2);
		}
		.nav-icon {
			width: 48rpx;
			height: 48rpx;
			flex-shrink: 0;
		}
	}
}
</style>
